<template>
  <view class="my">
    <view class="Navbar">
      <view class="top" @click="selected" :input="input">
        <image
          class="flag"
          :src="input.img ? input.img : '/static/country/EN.png'"
          mode="scaleToFill"
        />
        <text class="language">{{ input.text ? input.text : "EN" }}</text>
        <image
          class="pull-down"
          src="/static/art/Frame.png"
          mode="scaleToFill"
        />
      </view>

      <view class="tittle">{{ t("mine.title") }}</view>
    </view>

    <!-- 下拉框 -->
    <view class="select" v-show="isSelect">
      <view
        class="item"
        @click="
          () => handleChange('../../static/country/EN.png', 'EN', 'en', 'en')
        "
      >
        <image
          class="img"
          src="../../static/country/EN.png"
          mode="scaleToFill"
        />
        <text>EN</text>
      </view>

      <view
        class="item"
        @click="
          () =>
            handleChange(
              '../../static/country/SouthKorea.png',
              '한국어',
              'hy',
              'kr'
            )
        "
      >
        <image
          class="img"
          src="../../static/country/SouthKorea.png"
          mode="scaleToFill"
        />
        <text>한국어</text>
      </view>
      <view
        class="item"
        @click="
          () =>
            handleChange(
              '../../static/country/flag-circle-Germany.png',
              'Deutsch',
              'dy',
              'de'
            )
        "
      >
        <image
          class="img"
          src="../../static/country/flag-circle-Germany.png"
          mode="scaleToFill"
        />
        <text>Deutsch</text>
      </view>
      <view
        class="item"
        @click="
          () =>
            handleChange(
              '../../static/country/gildata-color-italy.png',
              'Italiano',
              'yy',
              'it'
            )
        "
      >
        <image
          class="img"
          src="../../static/country/gildata-color-italy.png"
          mode="scaleToFill"
        />
        <text>Italiano</text>
      </view>
      <view
        class="item"
        @click="
          () =>
            handleChange('../../static/country/Рос.png', 'Россия', 'ey', 'ru')
        "
      >
        <image
          class="img"
          src="../../static/country/Рос.png"
          mode="scaleToFill"
        />
        <text>Россия</text>
      </view>
      <view
        class="item"
        @click="
          () =>
            handleChange(
              '../../static/country/flag_TR_circle.png',
              'T ürkiye',
              'ty',
              'tr'
            )
        "
      >
        <image
          class="img"
          src="../../static/country/flag_TR_circle.png"
          mode="scaleToFill"
        />
        <text>T ürkiye</text>
      </view>
      <view
        class="item"
        @click="
          () => handleChange('../../static/country/jpn.png', 'ja', 'ja', 'ja')
        "
      >
        <image
          class="img"
          src="../../static/country/jpn.png"
          mode="scaleToFill"
        />
        <text>jp</text>
      </view>
    </view>
    <!-- 下拉框 -->
    <view class="text">{{ t("mine.member") }}</view>
    <view class="number"
      >{{ addrs }}
      <image
        class="copy"
        @click="copyText"
        src="/static/my/Frame.png"
        mode="scaleToFill"
      />
    </view>
    <view class="price">
      <view class="top">
        <text>{{ t("mine.assets") }} </text>
        <view
          >{{ assets.balance
          }}<text style="font-size: 28rpx; font-weight: 900">USDT</text></view
        >
      </view>
      <view class="bottom">
        <view class="txt" @click="openWith">{{ t("mine.with") }}</view>
        <image class="line" src="/static/my/Line 3.png" mode="scaleToFill" />
        <view class="txt" @click="openRecharge">{{ t("mine.rech") }}</view>
        <image class="line" src="/static/my/Line 3.png" mode="scaleToFill" />
        <view class="txt" @click="openDrawings">{{ t("mine.deta") }}</view>
      </view>
      <!-- 充值弹窗 -->
      <teleport to="body">
        <template v-if="displayRecharge">
          <view class="popup-overlay">
            <view class="popup-content">
              <text>{{ t("mine.rech") }}</text>
              <input
                type="number"
                :placeholder="t('mine.tips')"
                class="input"
                v-model="toup"
                placeholder-style="height: 22rpx;
font-size: 20rpx;
font-family: Arial, Arial;
font-weight: 400;
color: rgba(255,255,255,0.5);
line-height: 23rpx;
text-align: left;
  padding-left: 10px; /* 根据需要调整左边距 */"
              />
              <view class="unit">
                <view class="line"></view>
                <view class="txt">USDT</view>
              </view>
              <view class="btn">
                <view class="Cancel" @click="displayRecharge = false">{{
                  t("mine.cancel")
                }}</view>
                <view class="Ok" @click="toups">{{ t("mine.ok") }}</view>
              </view>
            </view>
          </view>
        </template>
      </teleport>
      <!-- 成功弹窗 -->
      <Popup :title="t('mine.msg')" ref="popup" />
      <!-- 成功弹窗 -->
    </view>
    <view class="content">
      <view style="font-size: 28rpx; color: #a2e8e8">{{
        t("mine.platform")
      }}</view>
      <view style="display: flex; justify-content: space-around">
        <view class="content-a">
          <view class="text-a">{{ t("mine.cumulative") }}</view>
          <view>{{ assets.earning_total }}</view>
        </view>
        <view class="content-a">
          <view class="text-a">{{ t("mine.freeze") }}</view>
          <view>{{ assets.freeze_balance }}</view>
        </view>
        <view class="content-a">
          <view class="text-a">{{ t("mine.available") }}</view>
          <view>{{ assets.balance }}</view>
        </view>
      </view>
    </view>
    <view class="list">
      <view class="item1">
        <navigator
          class="item"
          url="/pages/withdraw/index"
          open-type="navigate"
          hover-class="navigator-hover"
        >
          <image
            style="width: 40rpx; height: 40rpx; margin-bottom: 14rpx"
            src="/static/my/Frame(3).png"
            mode="scaleToFill"
          />
          <text>{{ t("mine.with") }}</text>
        </navigator>
      </view>
      <view class="item1">
        <navigator
          class="item"
          url="/pages/order/index"
          open-type="navigate"
          hover-class="navigator-hover"
        >
          <image
            style="width: 40rpx; height: 40rpx; margin-bottom: 14rpx"
            src="/static/my/Frame(4).png"
            mode="scaleToFill"
          />
          <text>{{ t("mine.order") }}</text>
        </navigator>
      </view>
      <view class="item1">
        <navigator
          url="/pages/drawings-a/index"
          class="item"
          open-type="navigate"
          hover-class="navigator-hover"
        >
          <image
            style="width: 40rpx; height: 40rpx; margin-bottom: 14rpx"
            src="/static/my/Frame(5).png"
            mode="scaleToFill"
          />
          <text>{{ t("mine.cords") }}</text>
        </navigator>
      </view>
      <view class="item1">
        <navigator
          url="/pages/share/index"
          class="item"
          open-type="navigate"
          hover-class="navigator-hover"
        >
          <image
            style="width: 40rpx; height: 40rpx; margin-bottom: 14rpx"
            src="/static/my/Frame(6).png"
            mode="scaleToFill"
          />
          <text>{{ t("mine.invite") }}</text>
        </navigator>
      </view>
      <view class="item1">
        <navigator
          url="/pages/authentication/index"
          class="item"
          open-type="navigate"
          hover-class="navigator-hover"
        >
          <image
            style="width: 40rpx; height: 40rpx; margin-bottom: 14rpx"
            src="/static/my/Frame(8).png"
            mode="scaleToFill"
          />
          <text>{{ t("mine.authentication") }}</text>
        </navigator>
      </view>
      <view class="item1">
        <navigator
          url="/pages/video/index"
          class="item"
          open-type="navigate"
          hover-class="navigator-hover"
        >
          <image
            style="width: 40rpx; height: 40rpx; margin-bottom: 14rpx"
            src="/static/my/Frame(9).png"
            mode="scaleToFill"
          />
          <text>{{ t("mine.video") }}</text>
        </navigator>
      </view>
      <view class="item1">
        <navigator
          url="/pages/detail/index"
          class="item"
          open-type="navigate"
          hover-class="navigator-hover"
        >
          <image
            style="width: 40rpx; height: 40rpx; margin-bottom: 14rpx"
            src="/static/my/Frame(4).png"
            mode="scaleToFill"
          />
          <text>{{ t("mine.bankDetail") }}</text>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script setup>
import api from "../../networks/apis";
import { onMounted, ref, computed, toRaw, nextTick } from "vue";
import Popup from "../../components/Popup.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { transferToken, switchNetwork } from "@/networks/web3/bsc.js";
import { showSuccessToast, showFailToast, showToast } from "vant";
import { useUserStore } from "../../store/index";
import { onShow, onHide, onLoad } from "@dcloudio/uni-app";

const useStore = useUserStore();
console.log(useI18n(), "1111111");
/**
 * 切换语言
 * @param currentLocale 当前选中的语言
 */
const { locale } = useI18n();
const swtichLocale = (currentLocale) => {
  localStorage.setItem("lang", currentLocale);
  locale.value = currentLocale;
};
//订单号
const orderid = ref("");
const has = ref("");
const decimals = ref(0);
const assets = ref("");
const abis = ref({
  abi: "",
  address: "",
});
const networkData = ref({
  chainId: "",
  chainName: "",
  rpcUrls: [],
  blockExplorerUrls: [],
  nativeCurrency: {
    symbol: "ETH",
    decimals: 18,
  },
}); //切换网络所需的信息对象
const addrs = ref("");
//收款地址
const receiving = ref("");

onShow(async () => {
  const loc = useI18n().locale.value;
  if (loc == "en") {
    input.value.img = "../../static/country/EN.png";
    input.value.text = "EN";
  } else if (loc == "dy") {
    input.value.img = "../../static/country/flag-circle-Germany.png";
    input.value.text = "Deutsch";
  } else if (loc == "ey") {
    input.value.img = "../../static/country/Рос.png";
    input.value.text = "Россия";
  } else if (loc == "hy") {
    input.value.img = "../../static/country/SouthKorea.png";
    input.value.text = "한국어";
  } else if (loc == "ty") {
    input.value.img = "../../static/country/flag_TR_circle.png";
    input.value.text = "T ürkiye";
  } else if (loc == "yy") {
    input.value.img = "../../static/country/gildata-color-italy.png";
    input.value.text = "Italiano";
  } else if (loc == "ja") {
    input.value.img = "../../static/country/jpn.png";
    input.value.text = "ja";
  }
  const { data } = await api.userAssets();
  assets.value = data;
  const originalHex = useStore.user.address;
  // 提取要隐藏的部分
  const maskedPart = "******";
  // 构建被隐藏的部分、星号部分和最后的七位数
  addrs.value = `${originalHex.substring(0, 5)}${maskedPart}${originalHex.slice(
    -7
  )}`;
  nextTick(async () => {
    chains();
  });
});

//下拉框
const input = ref([""]);
//点击下拉框选项
const handleChange = (img, text, a, lang) => {
  input.value = { img, text };
  isSelect.value = false;
  swtichLocale(a);
  // 切换语言
  const getLanguage = async () => {
    const { data } = api.getLanguageAPI(lang);
    console.log("----->语言", data);
  };
  getLanguage();
};
const isSelect = ref(false); //下拉框显示隐藏
const selected = () => {
  isSelect.value = !isSelect.value;
};
//点击跳转页面
const openDrawings = () => {
  uni.navigateTo({ url: "/pages/drawings/index" });
};
const openWith = () => {
  uni.navigateTo({ url: "/pages/withdraw/index" });
};
//// 弹窗充值
const displayRecharge = ref(false);
// const title = ref(t('mine.rech'));
const tips = ref("Please enter the amount that needs to be recharged");
const openRecharge = () => {
  // displayRecharge.value = true;
  uni.navigateTo({ url: "/pages/recharge/index" });
};
//点击确定
const Ok = () => {
  console.log("充值操作----->");
  displayRecharge.value = false;
  popup.value.showPopup(); // 调用`showPopup`方法
};
//用ref调用弹窗子组件的方法
const popup = ref();
//web3充值
const toup = ref();
const toups = async () => {
  //充值
  const res = await api.recharge(toup.value);
  if (res.code == 0) {
    orderid.value = res.data.transaction_no;
    uni.showLoading({
      title: "Loading",
      mask: true,
    });
    console.log({
      a: abis.value,
      b: receiving.value,
      c: toup.value,
      d: decimals.value,
    });
    transferToken(
      toRaw(abis.value),
      toRaw(receiving.value),
      +toRaw(toup.value),
      toRaw(decimals.value)
    )
      .then(async (res) => {
        has.value = res;
        toup.value = "";
        await voucher();
        uni.hideLoading({});
        const { data } = await api.userAssets();
        assets.value = data;
        const a = await api.userInfo();
        useStore.setuserInfo(a.data);
      })
      .catch((err) => {
        uni.hideLoading({});
        showFailToast("User cancel payment");
        // console.log("err", err);
        toup.value = "";
      });
  } else {
    showFailToast("Recharge failure");
    toup.value = "";
    displayRecharge.value = false;
  }
};
//充值回调
const voucher = () => {
  let account = 0;
  api
    .paymentVoucher({ transaction_no: orderid.value, hash: has.value })
    .then((res) => {
      if (res.code == 0) {
        Ok();
        // userinfo();
      } else {
        if (account < 10) {
          account++;
          return setTimeout(voucher, 2000);
        }
        throw new Error(res.msg);
      }
    })
    .catch((err) => {
      if (account < 10) {
        account++;
        return setTimeout(voucher, 2000);
      }
      showFailToast("Recharge failure");
      console.log("err==", err);
    });
};
//获取信息配置
const cong = () => {
  api.chains().then((res) => {
    if (res.code == 0) {
      console.log(res);
      abis.value.abi = res.data.api;
      abis.value.address = res.data.address;
      receiving.value = res.data.receiving_address;
      decimals.value = res.data.decimals;
    }
  });
};
cong();

//获取链的信息
const chains = () => {
  api.chains().then((res) => {
    if (res.code == 0) {
      console.log(res.data, "链信息");
      networkData.value.chainId = res.data.chain_id;
      networkData.value.chainName = res.data.name;
      networkData.value.rpcUrls = res.data.rpc_url;
      networkData.value.blockExplorerUrls = res.data.scan_url;
      // networkData.value.nativeCurrency = res.data.nativeCurrency
      if (window.ethereum.chainId != networkData.value.chainId) {
        setNetwork();
      }
    }
  });
};
//切换网络
const setNetwork = () => {
  console.log(networkData.value);
  switchNetwork(toRaw(networkData.value))
    .then((res) => {
      // showToast('Network connection successful');
      console.log("res==", res);
    })
    .catch((err) => {
      showToast("Network connection failure");
      console.log("err==", err);
    });
};
// 复制文本的函数
const copyText = () => {
  const text = useStore.user.address;
  uni.setClipboardData({
    data: text,
    success: function () {
      console.log("复制成功");
      // 可以添加提示用户已复制的代码
      uni.showToast({
        title: "Successful replication",
        icon: "success",
        duration: 2000,
      });
    },
    fail: function () {
      console.log("复制失败");
      // 错误处理
    },
  });
};
</script>

<style lang="scss" scoped>
.select {
  width: 252rpx;
  height: 452rpx;
  padding: 20rpx 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-image: url("../static/country/Rectangle 33.png");
  background-size: cover;
  background-repeat: no-repeat;

  .item {
    margin-left: 30rpx;
    font-size: 22rpx;
    font-family: Arial, Arial;
    font-weight: 400;
    color: #ffffff;
    line-height: 26rpx;

    .img {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }
  }

  position: absolute;
}

.my {
  width: 750rpx;
  height: 1624rpx;
  background: linear-gradient(180deg, #040a40 0%, #042e40 0%, #0d1324 100%);

  .Navbar {
    width: 100%;
    height: 110rpx;
    display: flex;
    align-items: center;
    padding: 70rpx 30rpx 2rpx 30rpx;
    background: transparent;
    justify-content: space-between;

    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .flag {
        width: 44rpx;
        height: 44rpx;
      }

      .language {
        font-size: 22rpx;
        font-family: Inika, Inika;
        font-weight: 400;
        color: #ffffff;
        line-height: 26rpx;
        height: 28rpx;
        margin: 0 6rpx;
      }

      .pull-down {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .tittle {
      width: 50rpx;
      flex: 1;
      height: 32rpx;
      font-size: 28rpx;
      font-family: Arial, Arial;
      font-weight: bold;
      color: #ffffff;
      line-height: 33rpx;
      padding-left: 178rpx;
    }

    .img {
      width: 40rpx;
      height: 40rpx;
      padding-left: 72rpx;
    }
  }

  .text {
    height: 28rpx;
    font-size: 24rpx;
    font-family: Arial, Arial;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.8);
    line-height: 28rpx;
    text-align: center;
    margin-top: 90rpx;
  }

  .number {
    height: 56rpx;
    font-size: 40rpx;
    font-family: Arial, Arial;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.8);
    line-height: 47rpx;
    text-align: center;
    margin-top: 40rpx;

    .copy {
      width: 30rpx;
      height: 30rpx;
    }
  }

  .price {
    width: 690rpx;
    height: 192rpx;
    margin: 0 auto;
    background-image: url("/static/my/Frame 1.png");
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-evenly;
    margin-top: 78rpx;

    .top {
      padding-left: 26rpx;
      display: flex;
      font-size: 48rpx;
      font-family: Arial, Arial;
      font-weight: 900;
      color: #363636;
      line-height: 56rpx;
      align-items: center;

      text {
        font-size: 28rpx;
        font-family: Arial, Arial;
        font-weight: normal;
        color: #363636;
        line-height: 33rpx;
      }
    }

    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-around;

      .txt {
        width: 160rpx;
        height: 46rpx;
        font-size: 24rpx;
        font-family: Inika, Inika;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.5);
        line-height: 46rpx;
        background-image: url("/static/my/Rectangle 59.png");
        background-size: cover;
        background-repeat: no-repeat;
        text-align: center;
        padding-top: 5rpx;
      }

      .line {
        width: 2rpx;
        height: 24rpx;
      }
    }
  }

  .content {
    width: 690rpx;
    height: 168rpx;
    margin: 48rpx auto;

    .content-a {
      height: 34rpx;
      font-size: 24rpx;
      font-family: Arial, Arial;
      font-weight: 900;
      color: #ffffff;
      line-height: 28rpx;
      padding-top: 50rpx;
      text-align: center;

      .text-a {
        display: block;
        height: 26rpx;
        font-size: 22rpx;
        font-family: Arial, Arial;
        font-weight: normal;
        color: rgba(255, 255, 255, 0.5);
        line-height: 26rpx;
        margin-bottom: 40rpx;
      }
    }
  }

  .list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30rpx;
    /* 设置盒子之间的间隔 */
    margin: 70rpx auto 0;

    .item1 {
      width: calc(33.33% - 30rpx);
      /* 一行显示3个盒子，减去盒子之间的间隔 */
      box-sizing: border-box;
      padding: 10rpx;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        font-size: 24rpx;
        font-family: Arial, Arial;
        font-weight: normal;
        color: #ffffff;
        line-height: 28rpx;
      }
      .video-select {
        width: 198rpx;
        height: 193rpx;
        color: #fff;
        font-size: 24rpx;
        background-color: #000;
        padding: 15rpx;
        border-radius: 15rpx;
        .title {
          margin-bottom: 25rpx;
        }
        .video-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 15rpx 0;
        }
      }
    }
  }
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  width: 688rpx;
  height: 380rpx;
  background-image: url("/static/recharge/Rectangle 36.png");
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;

  text {
    width: 146rpx;
    height: 36rpx;
    font-size: 32rpx;
    font-family: Arial, Arial;
    font-weight: bold;
    color: #00d084;
    line-height: 38rpx;
    display: block;
    margin: 30rpx auto;
  }

  .input {
    width: 628rpx;
    height: 94rpx;
    background-image: url("/static/recharge/Rectangle 75.png");
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto;
    color: #fff;
    position: relative;
  }

  .unit {
    position: absolute;
    display: flex;
    transform: translate(580%, -160%);

    .line {
      width: 2rpx;
      height: 38rpx;
      background: #929191;
    }

    .txt {
      margin-left: 5rpx;
      height: 40rpx;
      font-size: 28rpx;
      font-family: Arial, Arial;
      font-weight: 900;
      color: #ffffff;
      line-height: 40rpx;
    }
  }

  .btn {
    height: 36rpx;
    font-size: 32rpx;
    font-family: Arial, Arial;
    font-weight: bold;
    color: #ffffff;
    line-height: 38rpx;
    display: flex;
    justify-content: space-evenly;
    margin-top: 50rpx;

    .Cancel {
      width: 284rpx;
      height: 74rpx;
      line-height: 74rpx;
      background-image: url("/static/recharge/Rectangle 76.png");
      background-size: cover;
      background-repeat: no-repeat;
    }

    .Ok {
      width: 284rpx;
      height: 74rpx;
      line-height: 74rpx;
      background-image: url("/static/recharge/Rectangle 62.png");
      background-size: cover;
      background-repeat: no-repeat;
    }
  }
}
</style>
